<template>
  <div>
    <!-- floating -->
    <v-navigation-drawer app floating v-model="isshow" width="300">
      <!-- 侧边栏的 抽屉组件 -->
      <template v-slot:prepend>
        <v-app-bar class="pa-0 v-bar--underline" dense elevation="0"
          >drawer-prepend</v-app-bar
        >
      </template>

      <v-list-item>
        <v-list-item-content>
          <v-list-item-title class="title">
            <h3 class="text-center">学习内容</h3>
          </v-list-item-title>
          <!-- <v-list-item-subtitle> subtext </v-list-item-subtitle> -->
        </v-list-item-content>
      </v-list-item>

      <v-divider></v-divider>

      <!-- vlist -->
      <v-list>
        <v-list-group prepend-icon="mdi-palette" no-action>
          <template v-slot:activator>
            <v-list-item-content>样式和动画</v-list-item-content>
          </template>
          <v-list-item link to="/style-and-animations/mdi-icon-search"
            >mdi图标搜索</v-list-item
          >
          <v-list-item link to="/style-and-animations/color-class-search"
            >颜色</v-list-item
          >
        </v-list-group>

        <v-list-group prepend-icon="mdi-view-dashboard" no-action>
          <template v-slot:activator>
            <v-list-item-content>UI组件</v-list-item-content>
          </template>

          <!-- Navigation drawers（导航抽屉） -->
          <v-list-item link to="/components/navigation-drawers">
            <!-- <v-list-item-icon>
            <v-icon>mdi-home</v-icon>
          </v-list-item-icon> -->
            <v-list-item-title>
              Navigation drawers（导航抽屉）
            </v-list-item-title>
          </v-list-item>

          <!-- Bars 栏 -->
          <v-list-group sub-group no-action>
            <template v-slot:activator>
              <v-list-item-content>Bars(栏)</v-list-item-content>
            </template>
            <v-list-item link to="/components/app-bars">
              <v-list-item-content>
                <v-list-item-title> App bars(应用栏) </v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-item link to="/components/tool-bars">
              <v-list-item-content>
                <v-list-item-title> Tool bars(工具栏) </v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-item link to="/components/system-bars">
              <v-list-item-content>
                <v-list-item-title> System bars(系统栏) </v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-group>

          <!-- Alerts（提示框） -->
          <v-list-item link to="/components/alerts">
            <v-list-item-title> Alerts（提示框） </v-list-item-title>
          </v-list-item>
          <!-- Aspect Ratios（宽高比） -->
          <v-list-item link to="/components/aspect-ratios">
            <v-list-item-title> Aspect Ratios（宽高比） </v-list-item-title>
          </v-list-item>
          <!-- Avatars（头像） -->
          <v-list-item link to="/components/avatar">
            <v-list-item-title> Avatars（头像） </v-list-item-title>
          </v-list-item>
          <!-- Badges（徽章） -->
          <v-list-item link to="/components/badges">
            <v-list-item-title> Badges（徽章） </v-list-item-title>
          </v-list-item>
          <!-- Banner（横幅） -->
          <v-list-item link to="/components/banner">
            <v-list-item-title> Banner（横幅） </v-list-item-title>
          </v-list-item>
          <!-- Bottom navigation（底部导航栏） -->
          <v-list-item link to="/components/bottom-navigation">
            <v-list-item-title> Bottom navigation（底部导航栏） </v-list-item-title>
          </v-list-item>
          <!-- Bottom sheets（底部工作表） -->
          <v-list-item link to="/components/bottom-sheets">
            <v-list-item-title> Bottom sheets（底部工作表） </v-list-item-title>
          </v-list-item>
          <!-- Breadcrumbs（面包屑导航） -->
          <v-list-item link to="/components/breadcrumbs">
            <v-list-item-title> Breadcrumbs（面包屑导航） </v-list-item-title>
          </v-list-item>
          <!-- Buttons（按钮） -->
          <v-list-item link to="/components/buttons">
            <v-list-item-title> Buttons（按钮） </v-list-item-title>
          </v-list-item>

          <!-- UI组件 -->
        </v-list-group>
      </v-list>
      <!-- vlist -->
    </v-navigation-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isshow: null,
    };
  },
};
</script>
